<!DOCTYPE html>
{% extends "base.html" %}

{% block title %}学习资料{% endblock %}

{% block head %}
    <style>
        h {
            position: absolute;
            color: #8D8D8D;
            top: 30%;
            left: 40%;
            font-style: italic;
            font-size: 100px;
        }

        div {
            line-height: 3;
        }

        #texts {
            padding-left: 20px;
            background-color: #E6E6E6;
            white-space: pre-wrap;
        }

        pre {
            border: 1px solid #ccc;
            padding: 5px;
            background: #eeeeee;
            color: #004088;
            overflow: auto;
            font-family: Consolas;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div>
                <ul class="layui-nav layui-nav-tree " id="nav" lay-filter="test">
                </ul>
            </div>
        </div>
    </div>

    <div ID="texts" class="layui-body">
        <h>Learn</h>
    </div>

    <div class="layui-footer">
        <button id="collect" type="button" class="layui-btn" onclick="collect_func()">收藏</button>
    </div>
{% endblock %}

{% block script %}
    <script>
        var informationcode;
        var title;
        var $ = layui.jquery;
        var element = layui.element;
        var layer = layui.layer;
        !function () {
            var layFilter = $('#yuan').attr('lay-filter');
            document.getElementById("collect").classList.add("layui-btn-disabled");
            var codeid = GetQueryString("codeID");
            var webid = GetQueryString("webid");
            var informationid = GetQueryString("informationid");
            if (codeid != null) {
                $.ajax({
                    url: "/api/material/get_study_code_list",
                    async: false,
                    type: "GET",
                    data: {"ParentCodeID": codeid},
                    success: function (res) {
                        if (res.code === "200") {
                            var data = res.data;
                            var $list = $('#study_list');
                            var $item = $('<dl class="layui-nav-child"></dl>')
                            for (var i = 0; i < data.length; i++) {
                                $item.append('<dd><a href="/material?codeID=' + codeid + '&webid=' + data[i]['codeID'] + '">' + data[i]['codeName'] + '</a></dd>')
                            }
                            $list.append($item);
                            $("#yuan").find('span.layui-nav-bar').remove();
                            element.render('nav', layFilter);
                            if (webid === null) {
                                webid = res.data[0].codeID;
                            }
                        } else {
                            alert("查询失败!")
                        }
                    },
                    error: function (res) {
                        alert("请求失败！" + res.status)
                    }
                })
            }
            if (webid != null) {
                $("#nav").html("");
                $.ajax({
                    url: "/api/material/get_study_code_list",
                    async: false,
                    type: "GET",
                    data: {"ParentCodeID": webid},
                    success: function (where) {
                        if (where.code === "200") {
                            $("#nav").find('span.layui-nav-bar').remove();
                            $.each(where.data, function (i, value) {
                                var title_id = value.codeID;
                                var what = value.codeName;
                                var $li = "<li class='layui-nav-item'> <a href='javascript:;' data-id=" + title_id + ">" + what + "</a></li>";
                                $("#nav").append($li);
                            })
                            element.render('nav', layFilter);
                            if (informationid === null) {
                                informationid = where.data[0].codeID;
                            }

                        } else {
                            alert("查询失败!")
                        }
                        layer.close(index);
                    },
                    error: function (res) {
                        alert("请求失败！" + res.status)
                        layer.close(index);
                    }
                })
                element.on('nav', function (elem) {
                    informationid = elem.attr('data-id');

                    {% if g.user.is_active %}
                        $.ajax({
                            url: "/api/study_history",
                            async: true,
                            type: "post",
                            data: {
                                "codeID": codeid,
                                "infomationID": informationid,
                                "webID": webid,
                                "preStudyUrl": `/material?codeID=${codeid}&webid=${webid}&informationid=${informationid}`,
                                "preStudyName": elem[0].innerText,
                            },
                            success: function (where) {
                            },
                            error: function (res) {
                            }
                        })
                    {% endif %}
                    location.href = `/material?codeID=${codeid}&webid=${webid}&informationid=${informationid}`;
                })
            }
            if (informationid != null) {
                {#$("#nav").html("");#}
                var index = layer.load(1);
                $.ajax({
                    url: "/api/material/get_study_information",
                    async: true,
                    type: "get",
                    data: {"ParentCodeID": informationid},
                    success: function (message) {
                        if (message.code === "200") {
                            informationcode = message.data[0].informationID;
                            title = message.data[0].title;
                            var ss = message.data[0].text;
                            var whats = eval(ss);
                            var html = "";
                            for (var i = 0; i < whats.length; i++) {
                                html += "<" + whats[i][0] + ">" + whats[i][1] + "</" + whats[i][0] + ">";
                            }
                            document.getElementById('texts').innerHTML = html;
                            {% if g.user.is_active %}
                                document.getElementById("collect").classList.remove("layui-btn-disabled");
                                $.ajax({
                                    url: "/api/collect/list",
                                    type: "get",
                                    async: true,
                                    data: {"informationID": informationcode, "collectType": 3},
                                    success: function (ifcollect) {
                                        if (ifcollect.code === "200") {
                                            document.getElementById("collect").innerHTML = "取消收藏"
                                        } else {
                                            document.getElementById("collect").innerHTML = "收藏"
                                        }
                                    },
                                    error: function (res) {
                                        alert("请求失败！" + res.status)
                                    }
                                })
                            {% endif %}
                        }
                        layer.close(index);
                    },
                    error: function (res) {
                        alert("请求失败！" + res.status)
                        layer.close(index);
                    }
                })
            }
        }();

        function collect_func() {
            {% if g.user.is_active %}
                var temp = document.getElementById("collect").textContent
                if (temp === "收藏") {
                    $.ajax({
                        url: "/api/collect",
                        type: "POST",
                        async: true,
                        data: {
                            "informationID": informationcode,
                            "title": title
                        },
                        success: function (endcollect) {
                            if (endcollect.code === "200") {
                                alert(endcollect.msg)
                                document.getElementById("collect").innerHTML = "取消收藏"
                            } else {
                                alert("收藏失败!")
                            }
                        },
                        error: function (res) {
                            alert("请求失败！" + res.status)
                        }

                    })
                } else {
                    $.ajax({
                        url: "/api/collect",
                        type: "DELETE",
                        async: true,
                        data: {
                            "informationID": informationcode,
                        },
                        success: function (killcollect) {
                            if (killcollect.code === "200") {
                                alert(killcollect.msg)
                                document.getElementById("collect").innerHTML = "收藏"
                            } else {
                                alert("取消收藏失败!")
                            }
                        },
                        error: function (res) {
                            alert("请求失败！" + res.status)
                        }

                    })
                }
            {% else %}
                alert("请先登录！")
                return
            {% endif %}
        }
    </script>
{% endblock %}
